<template>
  <div class="whole_div">
    <!--  -->
    <div class="small_div">
      <el-card class="small_card">
        <!-- 昵称 -->
        <h1>{{ this.$store.state.admin.nickname }}</h1>
      </el-card>
      <div id="main"></div>
    </div>
    <div class="small_div">
      <div id="main_1"></div>
      <el-card class="small_card">
        <h1 style="color: white">welcome</h1>
      </el-card>
    </div>
    <div class="small_div">
      <el-card shadow="hover" class="small_card1">
        <el-statistic
          slot="header"
          style="margin-top: 5vh; font-size: 30px"
          ref="statistic"
          @finish="hilarity"
          format="HH:mm:ss"
          :value="deadline4"
          title="距离明日"
          time-indices
        >
        </el-statistic>
      </el-card>
    </div>
  </div>
</template>
<!-- 引入外部CSS文件 -->
<style>
@import url(../../css/indexView.css);
</style>
<script>
import * as echarts from "echarts";
import { index, obtainLabel, userNumberDate } from "@/api/indexApi";

export default {
  data() {
    return {
      deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
      stop: true,
      //图标图表数据
      chartArr: [
        { value: 0, name: "加载中" },
        { value: 0, name: "加载中" },
        { value: 0, name: "加载中" },
        { value: 0, name: "加载中" },
        { value: 0, name: "加载中" },
        // { value: 0, name: "" },
      ],
      chartArr1: {
        number: [2, 4, 7, 23, 25, 76, 135, 162, 200, 270, 280, 290], //每个标签的数量
        rate: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //对应的增长速率
      },
    };
  },
  methods: {
    hilarity() {
      this.$notify({
        title: "提示",
        message: "时间已到，你可知寸金难买寸光阴？",
        duration: 0,
      });
    },
    clickFn() {
      this.$refs.statistic.suspend(this.stop);
      this.stop = !this.stop;
    },
    // 首页进入方法
    MyIndex() {
      index().then((resp) => {
        console.log("index:", resp);
      });
    },
    //获取标签数据
    Label() {
      const _this = this;
      obtainLabel().then((resp) => {
        let keys = Object.keys(resp.data.data.name);
        for (let i = 0; i < keys.length - 1; i++) {
          _this.chartArr[i].value = resp.data.data.value[i];
          _this.chartArr[i].name = resp.data.data.name[i];
        }
      });
      userNumberDate().then((resp) => {
        console.log(resp.data);
        _this.chartArr1.number = resp.data.data.number;
        _this.chartArr1.rate = resp.data.data.efficiency;
      });
    },

    //绘制图表
    draw() {
      let myChart = echarts.init(document.getElementById("main"));
      let myChart1 = echarts.init(document.getElementById("main_1"));
      let option = {
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "label",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 30,
              },
            },
            labelLine: {
              show: false,
            },
            data: this.chartArr,
          },
        ],
      };

      let option1 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            data: [
              "Jan",
              "Feb",
              "Mar",
              "Apr",
              "May",
              "Jun",
              "Jul",
              "Aug",
              "Sep",
              "Oct",
              "Nov",
              "Dec",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "用户量",
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "增长速率",
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "用户量",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 人";
              },
            },
            data: this.chartArr1.number,
          },
          {
            name: "增长速率",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " %";
              },
            },
            data: this.chartArr1.rate,
          },
        ],
      };
      myChart.setOption(option);
      myChart1.setOption(option1);
    },
  },
  // 生命周期
  mounted() {
    this.Label();
    this.draw();
    setTimeout(() => {
      if (localStorage.getItem("activeIndex") == 1) {
        this.draw();
      }
    }, 1000); // 延时1秒执行draw
    this.MyIndex();
  },
};
</script>
